<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>动漫网站 - 首页</title>  
    <link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式表 -->  
</head>  
<style>
    /* 样式表：styles.css */  
  
/* 清除默认的列表样式 */  
nav ul {  
    list-style-type: none;  
    padding: 0;  
    margin: 0;  
    overflow: hidden; /* 防止内容溢出容器 */  
    background-color: #333; /* 导航栏背景色 */  
}  
  
/* 导航栏中的链接 */  
nav ul li {  
    float: left; /* 让列表项浮动以水平排列 */  
}  
  
nav ul li a {  
    display: block; /* 将链接转换为块级元素以填充整个列表项空间 */  
    color: white; /* 链接文字颜色 */  
    text-align: center; /* 文字居中 */  
    padding: 50px 80px; /* 内边距 */  
    text-decoration: none; /* 去除下划线 */ 
    font-size: 40px; 
}  
  
/* 链接的鼠标悬停效果 */  
nav ul li a:hover {  
    background-color: #111; /* 鼠标悬停时的背景色 */  
}  
  
/* 头部区域 */  
header {  
    display: flex; /* 使用Flexbox布局 */  
    flex-direction: column; /* 垂直方向排列子元素 */  
    align-items: center; /* 子元素在交叉轴上居中（这里是水平居中） */  
    justify-content: space-between; /* 子元素在主轴上分布 */  
    padding: 20px; /* 内边距 */  
    background-color: #f2f2f2; /* 背景色 */  
}  
  
header h1 {  
    color: #333; /* 标题文字颜色 */  
    text-align: center; /* 标题文字居中 */  
    font-size: 80px;
}  
  
header p {  
    color: #666; /* 段落文字颜色 */  
    text-align: center; /* 段落文字居中 */  
    margin-bottom: 0; /* 底部外边距为0 */  
    font-size: 20px;
}  

.image-container {  
        display: flex;  
        flex-wrap: wrap; /* 允许图片换行显示 */  
        justify-content: space-between; /* 图片之间水平间距 */  
    }  

    .image-item {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        margin-bottom: 20px; /* 图片之间的垂直间距 */  
    }  
    .image-item h3 {  
        text-align: center; /* 标题居中 */  
        margin-top: 10px; /* 标题上方的间距 */  
    }  
    .news{
        font-size: 40px;
    }
    section div a{
        text-decoration: none;
        font-size: 40px;
        color: blueviolet; 
}  
/* 其他可能的样式，如响应式布局等 */  
/* ... */
</style>
<body>  
  
<!-- 头部区域 -->  
<header>  
    <nav>  
        <ul>  
            <li><a href="主页.html">首页</a></li>  
            <li><a href="#anime-list">动漫列表</a></li>  
            <li><a href="分类.html">分类</a></li>  
            <li><a href="最近更新.html">最近更新</a></li>  
            <li><a href="注册.html">注册</a></li>  
            <li><a href="登录.html">登录</a></li>  
            <li><a href="搜索.html">搜索</a></li>  
            <li><a>浏览记录</a></li>  
            <li><a href="#news">新闻</a></li>  
            <li><a href="联系我们.html">联系我们</a></li>  
        </ul>  
    </nav>  
    <h1>欢迎来到动漫世界</h1>  
    <p>这里是你的动漫网站首页。</p>  
</header>  
<!-- 轮播图或横幅广告 -->  
<section id="banner">  
    <div class="image-container">  
        <div class="image-item"> 
          <a href="框架.html"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.8MSNFJOjjg71o9qw1OdjCgAAAA?rs=1&pid=ImgDetMain" width="700" height="400" alt="动漫网站横幅"></a>
          <h3><a href="框架.html">海贼王</h3></a>
        </div>
        <div class="image-item"> 
          <a href="#"><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.OkeLmJgXZfjN4Nj3BUHAcQHaEc?w=305&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅"></a>
          <h3><a href="#">火影忍者</a></h3>
        </div>
        <div class="image-item"> 
            <a href="#"> <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.Bj9aUvljxXcRC2X7dVXyEgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅"></a>
            <h3><a href="#">怪盗基德</a></h3>
          </div>
          <div class="image-item"> 
            <a href="#"> <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.FVU7OLuFDtz8qr2VOx3D2QHaFD?w=238&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅"></a>
            <h3><a href="#">无职转生</a></h3>
          </div>
          <div class="image-item"> 
            <a href="#"><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.d_SxNc5C_q2ZnHxvzzZDKQHaEn?w=270&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅"></a>
            <h3><a href="#">镇魂街</a></h3>
          </div>
          <div class="image-item"> 
            <a href="#"><img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.HUThhJivhhcpHbSwZOFKHQHaEK?w=197&h=111&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅"></a>
            <h3><a href="#">斗破苍穹</a></h3>
          </div>
          <div class="image-item"> 
            <a href="#"> <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.iyEk2PQFD4dHQ60-ZV4yugHaEK?w=273&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅"></a>
            <h3><a href="#">你的名字</a></h3>
          </div>
          <div class="image-item"> 
            <a href="#"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.nJo465uxV2x2-j__PlvgPwHaF7?w=196&h=181&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅"></a>
            <h3><a href="#">天气之子</a></h3>
          </div>
          <div class="image-item"> 
            <a href="#"> <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.5plDxpsSTJFrteeIy_qNNQHaEK?w=197&h=111&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅"></a>
            <h3><a href="#">一人之下</a></h3>
          </div>
          <div class="image-item"> 
            <a href="#"><img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.95tuWTAWjkHyDNW037QItgHaFV?w=232&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅"></a>
            <h3><a href="#">花园宝宝</a></h3>
          </div>
          <div class="image-item"> 
            <a href="#"> <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.jggG3xBKUud9XVbIvdSdygHaEo?w=273&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅"></a>
            <h3><a href="#">熊出没</a></h3>
          </div>
          <div class="image-item"> 
            <a href="#"> <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.Uh_rGAGh82iTXGRYuo-xMAHaFP?w=197&h=139&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫网站横幅"></a>
            <h3><a href="#">鬼灭之刃</a></h3>
          </div>
        <!-- 重复以上结构以添加更多图片 -->  
    </div>  
    <hr>
</section> 
<!-- 动漫列表 -->  
<section id="anime-list">  
    <h2 style="font-size: 60px; color: chocolate;">热门动漫推荐</h2>  
    <div class="anime-item"> 
        <a href="anime-detail.html">  
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.9de8bS-aUNJT27_NQAbyTAHaEK?w=299&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫1">  
            <h3>间谍过家家</h3>  
        </a>  
    </div>  
    <div class="anime-item">  
        <a href="anime-detail.html">  
            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.zDYYB6UrtaKR7QobyidPWwHaE8?w=197&h=131&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400" alt="动漫2">  
            <h3>咒术回战</h3>  
        </a>  
    </div>  
    <!-- 更多的动漫项... -->  
</section>  
  <hr>
<!-- 新闻或文章区域 -->  
<section id="news">  
    <h2 style="font-size: 60px; color: chocolate;">最新动漫新闻</h2>  
    <div>
        <article class="news">  
            <img src="https://pics5.baidu.com/feed/0d338744ebf81a4c2abea0cce34c4457242da69f.jpeg@f_auto?token=eabd7dbdca0253eb65bf5196210eaca1">
            <h3>海贼王1108集：意外的展开！草帽团联手CP0，激战反叛的炽天使</h3>  
            <p>意料外的展开，CP0联手草帽团激战炽天使。海贼王动画1108集，炽天使出乎意料的反叛，打算抹杀研究层内的所有人，战败被俘的路奇和卡库，为了活命，请求路飞解绑，并联手对付反叛的炽天使。</p>  
        </article> 
    </div> 
    <div>
        <article class="news">  
            <h3>火影忍者博人转要燃起来了？</h3>  
            <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.ivMIMzf_8JaQuZvbZG7F-gHaEK?w=325&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="700" height="400">
            <p>《博人传》官方的消息，《博人传》第二部“青年篇”正在制作中，但播出时间暂未公布。在“青年篇”漫画中，漩涡博人战力迎来了质变，但也成为了众矢之的，面对全忍界的追杀，他该何去何从呢......</p>  
        </article> 
    </div>
    <!-- 更多的新闻项... -->  
</section>  
  
<!-- 底部区域 -->  
<footer>  
    <p>版权信息 & 联系方式</p>  
</footer>  
  
</body>  
</html>